<template>
  <div class="person-info">
    <el-card class="info-card">
      <template #header>
        <div class="header">
          <span class="title">个人信息</span>
          <el-button type="primary" @click="handleEdit">编辑资料</el-button>
        </div>
      </template>

      <div class="info-content">
        <div class="avatar-section">
          <el-avatar :size="120" :src="userInfo.avatar" />
          <div class="user-name">{{ userInfo.username }}</div>
        </div>

        <div class="info-section">
          <el-descriptions :column="1" border>
            <el-descriptions-item label="用户名">{{ userInfo.username }}</el-descriptions-item>
            <el-descriptions-item label="性别">
              <span v-if="userInfo.sex === 0">男</span>
              <span v-if="userInfo.sex === 1">女</span>
              <span v-if="userInfo.sex === null">未设置</span>
            </el-descriptions-item>
            <el-descriptions-item label="年龄">{{ userInfo.age }}</el-descriptions-item>
            <el-descriptions-item label="电话">{{ userInfo.tel }}</el-descriptions-item>
            <el-descriptions-item label="邮箱">{{ userInfo.email }}</el-descriptions-item>
            <el-descriptions-item label="身份证号">{{ userInfo.id_card }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </div>
    </el-card>

    <!-- 编辑对话框 -->
    <el-dialog title="编辑个人信息" v-model="dialogVisible" width="40%">
      <el-form :model="form" label-width="80px">
        <el-form-item label="头像">
          <el-upload
              :action="baseUrl + '/files/upload'"
              :on-success="handleAvatarSuccess"
              :headers="token"
              class="avatar-uploader"
              :show-file-list="false"
          >
            <el-avatar v-if="form.avatar" :size="100" :src="form.avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户名">
          <el-input v-model="form.username" />
        </el-form-item>
        <el-form-item label="性别">
          <el-radio-group v-model="form.sex">
            <el-radio :label="0">男</el-radio>
            <el-radio :label="1">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄">
          <el-input-number v-model="form.age" :min="0" :max="120" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="form.tel" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" />
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="form.id_card" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span>
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="saveUserInfo">保存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import { get, post } from '@/net'
import { takeAccessToken } from '@/net'
import useUserStore from '@/stores/useUserStore'

const baseUrl = import.meta.env.VITE_BASE_URL

const token = ref({ 'Authorization': `Bearer ${takeAccessToken()}` })

const userInfo = ref({})
const userStorage = ref(
    {id :JSON.parse(window.localStorage.getItem('user')).id}
)
const dialogVisible = ref(false)
const form = ref({})

// 获取用户信息
const getUserInfo = () => {
  const id = userStorage.value.id
  get(`/api/user/getUserById/${id}`, (res) => {

    userInfo.value = res
    console.log(res)
  })
}

// 处理编辑
const handleEdit = () => {
  form.value = { ...userInfo.value }
  dialogVisible.value = true
}

// 头像上传成功
const handleAvatarSuccess = (res) => {
  form.value.avatar = res.data
}

// 保存用户信息
const saveUserInfo = () => {
  post('/api/user/updateUser', form.value, (res) => {
    ElMessage.success('保存成功')
    dialogVisible.value = false
    getUserInfo()  // 刷新数据
  }, (err) => {
    ElMessage.error('保存失败')
  })
}

onMounted(() => {
  getUserInfo()
})
</script>

<style scoped>
.person-info {
  width: 1400px;
  margin: 0 auto;
  padding: 20px;
}

.info-card {
  background: #fff;
  border-radius: 8px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.info-content {
  padding: 20px;
}

.avatar-section {
  text-align: center;
  margin-bottom: 30px;
}

.user-name {
  margin-top: 10px;
  font-size: 20px;
  font-weight: bold;
}

.info-section {
  max-width: 800px;
  margin: 0 auto;
}

.avatar-uploader {
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.avatar-uploader:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
}
</style>